<template>
  <el-dialog
    top="5vh"
    :visible="showVisible"
    center
    :show-close="false"
    width="700px"
    :append-to-body="true"
  >
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>{{
          isNew ? "新建数据导入导出模版" : "编辑数据导入导出模版"
        }}</span>
        <span class="el-icon-close g9 f26 poi" @click="handleCancel"></span>
      </div>
    </div>
    <el-form
      class="pl30 pr30"
      :model="formData"
      ref="form"
      label-position="top"
    >
      <el-form-item
        label="模版KEY"
        prop="key"
        :rules="[
          { required: true, message: '模版KEY不能为空', trigger: 'change' },
          {
            pattern: COMMON_CODE_REG_64,
            message: '请输入有效的模版KEY',
            trigger: 'change',
          },
        ]"
      >
        <template slot="label"
          >模版KEY
          <el-tooltip
            popper-class="custom-popper"
            :content="COMMON_CODE_REG_64_MSG"
            placement="top"
          >
            <i class="el-icon-question" />
          </el-tooltip>
        </template>
        <el-input
          :disabled="!isNew"
          v-model="formData.key"
          placeholder="请输入模版KEY"
          :maxlength="64"
          show-word-limit
        />
      </el-form-item>
      <el-form-item
        label="类型"
        prop="type"
        :rules="[
          { required: true, message: '类型不能为空', trigger: 'change' },
        ]"
      >
        <el-select v-model="formData.type">
          <el-option
            v-for="item in EXCEL_TYPE_ENUM"
            :key="item.label"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="模版名称"
        prop="name"
        :rules="[
          { required: true, message: '模版名称不能为空', trigger: 'change' },
        ]"
      >
        <el-input
          v-model="formData.name"
          placeholder="请输入模版名称"
          :maxlength="64"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="tr">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { EXCEL_TYPE_ENUM } from "@/utils/enum";
import { COMMON_CODE_REG_64, COMMON_CODE_REG_64_MSG } from "@/utils/reg";
import { postHmexceltemplate } from "@/apis/paas/HmExcelTemplateController.js";
import { cloneDeep } from "lodash";
export default {
  name: "DateImportExportForm",
  props: {
    modelInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      EXCEL_TYPE_ENUM,
      COMMON_CODE_REG_64,
      COMMON_CODE_REG_64_MSG,
      loading: false,
      showVisible: false,
      formData: {
        type: "IMPORT",
      },
      mode: "create",
    };
  },
  computed: {
    isNew() {
      return this.mode === "create";
    },
  },
  methods: {
    async addForm() {
      this.mode = "create";
      this.formData = {
        type: "IMPORT",
        name: "",
      };
      this.showVisible = true;
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },
    async editForm(recordData = {}) {
      const record = cloneDeep(recordData);
      this.mode = "edit";
      this.formData = {
        ...record,
      };
      this.showVisible = true;
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },
    handleCancel() {
      this.showVisible = false;
    },
    async submit() {
      try {
        await this.$refs.form.validate();
        let { id, key, name, type } = this.formData;
        let params = {};
        if (this.isNew) {
          params = {
            key,
            name,
            type,
            modelId: this.modelInfo.id,
          };
        } else {
          params = {
            id,
            key,
            name,
            type,
            modelId: this.modelInfo.id,
          };
        }
        postHmexceltemplate(params).then((res) => {
          this.$message.success("操作成功");
          this.handleCancel();
          this.$emit("ok");
        });
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.hov:hover {
  opacity: 0.7;
}
</style>
